<template>
  <div class="user-profile-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 信息区域 -->
    <van-cell title="头像" is-link center class="photo-cell" @click="openImageUpdate">
      <template #default>
        <van-image
          class="avatar"
          fit="cover"
          round
          :src="userProfile.photo"
        />
      </template>
    </van-cell>
    <van-cell title="昵称" :value="userProfile.name" is-link @click="isNameShow=true"/>
    <van-cell title="性别" :value="userProfile.gender===0 ? '男' : '女'" is-link @click="isGenderShow=true" />
    <van-cell title="生日" :value="userProfile.birthday" is-link @click="isBirthdayShow=true" />

    <!-- 上传图片控件 -->
    <!-- @change当file的内容发生改变时触发 -->
    <input type="file" ref="file" hidden @change="onFileChange">

    <!-- 编辑昵称 -->
    <van-popup
      class="name-popup"
      v-model="isNameShow"
      position="bottom"
      style="height: 100%"
    >
    <!-- 此处使用v-if是因为v-model传过去的是简单数据类型，可以使用model定义的对象去修改值，但是因为子组件中昵称清空后，并没有同步name和nameClone的值，所以才会再次打开弹出层输入框内容为空，而且因为弹出层采用的是display：none的操作，会保留上一次的数据渲染页面 -->
      <UpdateName
        v-if="isNameShow"
        @closeNameProup="isNameShow=false"
        v-model="userProfile.name"
      ></UpdateName>
    </van-popup>

    <!-- 编辑性别 -->
    <van-popup
      class="gender-popup"
      v-model="isGenderShow"
      position="bottom"
      style="height: 40%"
    >
      <UpdateGender
        v-if="isGenderShow"
        @closeGenderProup="isGenderShow=fasle"
        v-model="userProfile.gender"
      ></UpdateGender>
    </van-popup>

    <!-- 编辑生日 -->
    <van-popup
      class="birthday-popup"
      v-model="isBirthdayShow"
      position="bottom"
      style="height: 40%"
    >
      <UpdateBirthday
        v-if="isBirthdayShow"
        @closeBirthdayProup="isBirthdayShow=false"
        v-model="userProfile.birthday"
      ></UpdateBirthday>
    </van-popup>

    <!-- 头像预览弹框 -->
     <van-popup
      class="gender-popup"
      v-model="isUpdateImgShow"
      position="bottom"
      style="height: 100%"
    >
     <UpdatePhoto
        v-if="isUpdateImgShow"
        @close="isUpdateImgShow=false"
        :image="image"
        @updatePhoto="userProfile.photo=$event"
      ></UpdatePhoto>
    </van-popup>
  </div>
</template>

<script>
/*
  目标1: 生成个人信息页面并跳转
  1. 创建userProfile组件
  2. 配置对应路由
  3. 在my.vue中编辑资料按钮上实现路由跳转
*/

/*
  目标: 头像上传
  -图片上传
  1. 图片的上传和预览
  1.1 图片上传一定有一个input标签支持, 它拥有一个属性叫做type="file"
  1.2 该input仅作为上传图片的工具, 并不会展示到页面上 => hidden属性
  1.3 通过获取dom元素(ref), 然后通过代码触发click事件
  1.4 将图片对象转化为blob数据(URL.createObjectURL)
  1.5 该blob数据传递给子组件时,用string数据类型接收

  -图片剪裁
  1. 初始化cropperjs 裁剪插件
  2. 当点击确认时, 将图片裁剪, 并发送给后端
*/
import { getUserProfileAPI } from '../../api/index.js'
import UpdateName from './components/updateName.vue'
import UpdateGender from './components/updateGender'
import UpdateBirthday from './components/updateBirthday'
import UpdatePhoto from './components/updatePhoto'
export default {
  name: 'UseruserProfile',
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  data () {
    return {
      userProfile: {}, // 用户信息数据
      isNameShow: false, // 昵称弹出层状态
      isGenderShow: false, // 性别弹出层状态
      isBirthdayShow: false, // 生日弹出层状态
      isUpdateImgShow: false, // 头像弹出层状态
      image: '' // 头像
    }
  },
  created () {
    // 调用用户个人信息接口
    this.loadUserProfile()
  },
  methods: {
    // 开启上传图片
    openImageUpdate () {
      this.$refs.file.click()
    },
    // 上传控件中图片发生变化
    onFileChange () {
      // 通过dom元素获取图片文件
      const file = this.$refs.file.files[0]
      console.log(file)
      // 基于文件对象获取blob数据
      this.image = window.URL.createObjectURL(file)
      // 当连续上传两个相同的图片时, 会无法触发change事件, 如果遇到这种情况,将input标签中的内容清空即可
      this.$refs.file.value = ''
      this.isUpdateImgShow = true
    },
    // 获取用户个人信息
    async loadUserProfile () {
      try {
        const res = await getUserProfileAPI()
        console.log(res)
        this.userProfile = res.data.data
      } catch (error) {
        console.log(error)
        this.$toast('用户信息获取失败')
      }
    }
    // 关闭昵称弹出层, success为false表示点击的是取消, true为完成
    // 缺点： 会再次请求一次接口，但是使用自定义组件的v-model指令，就可以同步父子组件之间的数据，没必要再从请求接口的数据渲染页面了
    // closeNameProup (success = false) {
    //   // 无论点击取消还是完成, 都会关闭弹出层
    //   this.isNameShow = false
    //   // 如果成功了 调用获取用户信息接口
    //   if (success) {
    //     this.loadUserProfile()
    //   }
    // },
  }
}
</script>

<style lang="less" scoped>
.user-profile-container{
  :deep(.van-icon-arrow-left){
    color: #fff;
  }
  .avatar {
    width: 60px;
    height: 60px;
  }
  .photo-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .name-popup {
    background-color: #f5f7f9;
  }
}
</style>
